<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Intel WebRTC Collaboration Suite</title>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Management Console</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li id="welcome"></li>
            <li><a href="#"><button type="button" id="profile" class="btn btn-xs" data-toggle="modal" data-target="#myModal">Profile</button></a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- profile setting -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false" style="display: none;">
      <div class="modal-backdrop fade in"></div>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Profile</h4>
          </div>
          <div class="modal-body">
            <label for="inputId">Service Id</label>
            <input type="email" id="inputId" class="form-control" placeholder="" autocomplete="off" required>
            <label for="inputKey">Service Key</label>
            <input type="password" id="inputKey" class="form-control" placeholder="" autocomplete="off" required autofocus>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="remember-me"> Remember me
              </label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="saveServiceInfo">Save changes</button>
            <button type="button" class="btn btn-danger" id="clearCookie">Clear cookie!</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div id="mainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div  class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            ...
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="li hideLi"><a href="javascript:void(0);" onclick="a_click('service', this)">Overview <span class="sr-only">(current)</span></a></li>
            <li class="li normal active"><a href="javascript:void(0);" onclick="a_click('room', this)">Room Management</a></li>
            <!--Runtime Configuration is not implemented-->
            <li class="li hideLi" style="display: none;"><a href="javascript:void(0);" onclick="a_click('runtime', this)">Runtime Configuration</a></li>
          </ul>
          <div class="footer">
            <div class="container">
              <p class="text-muted">Powered by Intel <a href="http://webrtc.intel.com">WebRTC</a> Team.</p>
            </div>
          </div>
        </div>
        <div id="mainApp" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          ...
        </div>
      </div>
    </div>

    <!-- CSS -->
    <link rel="stylesheet" href="vendor/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/dashboard.css">

    <script src="vendor/js/jquery.min.js"></script>
    <script src="vendor/js/lodash.min.js"></script>

    <link rel="stylesheet" href="vendor/css/pnotify.css">
    <link rel="stylesheet" href="vendor/css/pnotify.buttons.css">
    <script src="vendor/js/pnotify.js"></script>
    <script src="vendor/js/pnotify.confirm.js"></script>
    <script src="vendor/js/pnotify.buttons.js"></script>

    <script src="vendor/js/bootstrap.min.js"></script> 
    <script src="vendor/js/crypto-js.js"></script>

    <script src="js/libapi.js"></script>
    <script src="js/util.js"></script>
    <script src="js/index.js"></script>

    <!-- Load React. -->
    <script src="vendor/js/react.production.min.js" ></script>
    <script src="vendor/js/react-dom.production.min.js" ></script>

    <!-- CSS -->
    <link rel="stylesheet" href="vendor/css/react-table.css">

    <!-- JS -->
    <script src="vendor/js/react-table.min.js"></script>

    <!-- Load our React component. -->
    <script src="js/App.js"></script>
  </body>
</html>

